<template>
    <a-modal
        v-model:visible="showModal"
        :title="title"
        :width="520"
        :destroyOnClose="true"
        :maskClosable="false"
        :confirmLoading="loading"
        @ok="onSubmit"
        @cancel="handleCancle"
    >
        <a-form class="dept-model" layout="horizontal" :model="formState" :rules="rules" ref="formRef">
            <a-form-item class="full-width" :label="t('yl.shortName')">
                <a-input v-model:value="formState.shortName" :placeholder="t('yl.shortName')" />
            </a-form-item>
            <a-form-item class="full-width" :label="t('yl.deviceType')">
                <a-select v-model:value="formState.typeCode" :placeholder="t('yl.deviceType')" @change="handleSelect">
                    <a-select-option v-for="item in selectType" :key="item.typeCode">
                        {{ item.typeName }}
                    </a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item class="full-width" :label="t('yl.seriesName')">
                <a-select v-model:value="formState.seriesCode" :placeholder="t('yl.seriesName')">
                    <a-select-option v-for="items in selectSeries" :key="items.typeCode">
                        {{ items.typeName }}
                    </a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item class="full-width" :label="t('yl.tagFirm')">
                <a-select v-model:value="formState.tagFirm" :placeholder="t('yl.tagFirm')">
                    <a-select-option v-for="item in selectFirm" :key="item.id">
                        {{ item.value }}
                    </a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item class="full-width" :label="t('yl.supportColor')" v-if="formState.typeCode !== 'JZ0000'">
                <a-select v-model:value="formState.tagColour" :placeholder="t('yl.supportColor')">
                    <a-select-option v-for="item in selectColor" :key="item.id">
                        {{ item.value }}
                    </a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item class="full-width" :label="t('yl.deviceSize')" v-if="formState.typeCode !== 'JZ0000'">
                <a-select v-model:value="formState.tagMeasure" :placeholder="t('yl.deviceSize')">
                    <a-select-option v-for="item in selectDimension" :key="item.id">
                        {{ item.value }}
                    </a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item class="full-width" :label="t('yl.resolution')" v-if="formState.typeCode !== 'JZ0000'">
                <a-select v-model:value="formState.tagRatio" :placeholder="t('yl.resolution')">
                    <a-select-option v-for="item in selectRatio" :key="item.id">
                        {{ item.value }}
                    </a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item class="full-width" :label="t('yl.withLight')">
                <a-switch v-model:checked="formState.priceIsLight" />
            </a-form-item>
            <a-form-item class="full-width" :label="t('yl.waterproof')" v-if="formState.typeCode !== 'JZ0000'">
                <a-switch v-model:checked="formState.priceIsWater" />
            </a-form-item>
            <a-form-item class="full-width" :label="t('yl.antifreeze')">
                <a-switch v-model:checked="formState.antifreeze" />
            </a-form-item>
            <a-form-item class="full-width" :label="t('yl.remarks')">
                <a-textarea v-model:value="formState.remark" :placeholder="t('yl.remarks')" :rows="4" />
            </a-form-item>
        </a-form>
    </a-modal>
</template>
<script lang="ts">
import { computed, defineComponent, reactive, ref, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import _ from 'lodash';
import typeSeries from '@/hooks/typeSeries';

interface DeptState {
    remark: string;
    seriesCode: string;
    tagColour: string;
    typeCode: string;
    tagMeasure: string;
    tagRatio: string;
    priceIsLight: boolean;
    priceIsWater: boolean;
    antifreeze: boolean;
    shortName: string;
    id: string;
    tagFirm: string | number;
}

// 表单校验规则
const initRules = (t: fn) => {
    return {
        deviceCode: [{ required: true, message: t('yl.deviceCode'), trigger: 'blur' }],
    };
};

export default defineComponent({
    name: 'roleModel',
    components: {},
    props: {
        visible: {
            type: Boolean,
            default: () => false,
        },
        selectColor: {
            type: Array,
            default: () => false,
        },
        selectRatio: {
            type: Array,
            default: () => false,
        },
        selectDimension: {
            type: Array,
            default: () => false,
        },

        selectFirm: {
            type: Array,
            default: () => false,
        },
        title: {
            type: String,
        },
        loading: {
            type: Boolean,
            default: () => false,
        },
        dept: {
            type: Object,
        },
    },
    emits: ['submit', 'cancle'],
    setup(props, { emit }) {
        const { t } = useI18n();
        const showModal = computed(() => props.visible);
        const selectType: any = ref([]);
        const selectSeries: any = ref([]);
        const selectFirm = computed(() => props.selectFirm);
        const formState: DeptState = reactive({
            typeCode: props.dept.typeCode,
            remark: props.dept.remark,
            seriesCode: props.dept.seriesCode,
            tagColour: props.dept.tagColour,
            tagMeasure: props.dept.tagMeasure,
            tagRatio: props.dept.tagRatio,
            priceIsLight: props.dept.priceIsLight ? props.dept.priceIsLight : true,
            priceIsWater: props.dept.priceIsWater,
            antifreeze: props.dept.antifreeze,
            shortName: props.dept.shortName,
            id: props.dept.id,
            tagFirm: props.dept.tagFirm,
        });

        // // 编辑时赋值
        // watch(
        //     () => props.dept,
        //     (dept) => {
        //         const {
        //             remark,
        //             id,
        //             seriesCode,
        //             typeCode,
        //             tagColour,
        //             tagMeasure,
        //             tagRatio,
        //             priceIsLight,
        //             priceIsWater,
        //             antifreeze,
        //             tagFirm,
        //             shortName,
        //         } = dept as NormalObj;
        //         formState.shortName = shortName;
        //         formState.typeCode = typeCode;
        //         formState.id = id;
        //         formState.remark = remark ? remark : '';
        //         formState.seriesCode = seriesCode;
        //         formState.tagColour = tagColour;
        //         formState.tagMeasure = tagMeasure;
        //         formState.tagRatio = tagRatio;
        //         formState.priceIsLight = priceIsLight ? priceIsLight : true;
        //         if (id) {
        //             formState.priceIsWater = priceIsWater;
        //             formState.antifreeze = antifreeze;
        //             formState.tagFirm = tagFirm;
        //         }
        //         if (typeCode) {
        //             console.log('handleSelect');
        //             onSelect(typeCode);
        //         }

        //         console.log(formState);
        //     }
        // );

        // formState.shortName = shortName;
        // formState.typeCode = typeCode;
        // formState.id = id;
        // formState.remark = remark ? remark : '';
        // formState.seriesCode = seriesCode;
        // formState.tagColour = tagColour;
        // formState.tagMeasure = tagMeasure;
        // formState.tagRatio = tagRatio;
        // formState.priceIsLight = priceIsLight ? priceIsLight : true;
        // if (id) {
        //     formState.priceIsWater = priceIsWater;
        //     formState.antifreeze = antifreeze;
        //     formState.tagFirm = tagFirm;
        // }

        onMounted(async () => {
            getTypeData();
            if (formState.typeCode) {
                console.log('handleSelect');
                getSeriesData(formState.typeCode);
            }
        });
        // 表单校验
        const rules = initRules(t);
        const formRef = ref();
        // 提交
        const onSubmit = () => {
            console.log(formState);
            formRef.value.validate().then(() => {
                emit('submit', formState);
            });
        };

        // 根据类型查找系列
        const handleSelect = (val: any) => {
            selectType.value.forEach((i: any) => {
                if (i.typeCode == val) {
                    i;
                    formState.seriesCode = '';
                    getSeriesData(i.typeCode);
                }
            });
        };

        // 取消
        const handleCancle = () => {
            return emit('cancle');
        };

        //获取所有的设备类型
        const getTypeData = async () => {
            const { list, total } = await typeSeries({
                page: 0,
                size: 9,
                sort: 'id,desc',
                type: 0,
                pCode: '',
            });
            selectType.value = list;
            console.log(selectType.value);
        };
        //根据类型获取所有的系列
        const getSeriesData = async (code: string) => {
            const { list, total } = await typeSeries({
                page: 0,
                size: 9,
                sort: 'id,desc',
                type: 1,
                pCode: code,
            });
            selectSeries.value = list;
            console.log(selectSeries);
        };

        return {
            formRef,
            showModal,
            formState,
            t,
            rules,
            onSubmit,
            handleSelect,
            handleCancle,
            getTypeData,
            selectType,
            getSeriesData,
            selectSeries,
        };
    },
});
</script>
<style lang="scss" scoped>
.dept-model {
    @include flexWrap;
    width: 100%;
    .ant-form-item {
        @include flex;
        width: 50%;
        margin-right: 0;
        padding-right: $width10;
        margin-bottom: $width8;
        :deep .ant-form-item-label {
            flex-basis: $formLabel;
        }
        :deep .ant-form-item-control-wrapper {
            flex: 1;
        }
        :deep .ant-form-item-children,
        :deep .ant-input-number {
            width: 100%;
        }
        &.full-width {
            width: 100%;
        }
    }
}
</style>
